<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<html>
<head>
<title></title>
<link href="<s:url value='/common/lib/ligerUI/skins/Aqua/css/ligerui-all.css'/>" rel="stylesheet" type="text/css" />
<link href="<s:url value='/common/lib/uploadify/uploadify.css'/>" rel="stylesheet" type="text/css" />
<script src="<s:url value='/common/lib/jquery/jquery-1.7.1.min.js'/>" type="text/javascript"></script>
<script src="<s:url value='/common/lib/uploadify/jquery.uploadify.min.js'/>" type="text/javascript"></script>
<script src="<s:url value='/common/lib/ligerUI/js/core/base.js'/>" type="text/javascript"></script>
<script src="<s:url value='/common/lib/ligerUI/js/plugins/ligerDialog.js'/>" type="text/javascript"></script>
<style type="text/css">
	body { 
		font-family: "微软雅黑", "宋体", Arial, sans-serif; 
		font-size: 12px; 
	}
	#upload-box { padding: 10px; }
	.btn { 
		background-color:#FFF; 
		border:1px solid #CDCDCD;
		height:22px; 
		width:70px; 
	}
	.btn1 { 
		background-color:#FFF; 
		border:1px solid #CDCDCD;
		height:22px; 
		width:120px; 
	}
	#gallery {
		padding: 10px;
		height: 700px;
	}
</style>
</head>
<body>
	<s:hidden name="uTimeStamp"/>
	<s:hidden name="uToken"/>
	<s:hidden name="dealerCode"/>
	<s:hidden name="timeStamp"/>
	<s:hidden name="imgType"/>
	<s:hidden name="fsname"/>
	<h3>上传VIN扫描照片</h3>
	<div id="dealer-code" style="padding: 5px;">
		<div>
			<label style="width: 158px; height: 20px;">请首先输入经销商网络代码:</label>
			<input type="text" id="dealerCodeText" name="dealerCodeText" class="l-text"/>
			<input type="button" id="dealerCodeInput" onclick="inputDealerCode()" value="输入" class="btn"/>
		</div>
		<div style="padding:2px;">
			<label id="stroragePathLabel" style="width: 158px; height: 20px;">请选择原始数据上传日期：</label>
			<select id="stroragePath" style="width: 120px; height: 20px;"></select>
		</div>
	</div>
	
	<div id="imgTypeBox" style="padding:2px;">
		<label id="typeLabel" style="width: 158px; height: 20px; padding:2px;">请选择扫描照片类型：</label>
		<input type="radio" value="vin" name="imgType" onclick="chooseType()">VIN码照片</input>
		<input type="radio" value="omd" name="imgType" onclick="chooseType()">OMD系统截屏</input>
	</div>
	
	<div id="nameBox" style="padding:2px;">
		<div>
			<label id="typeLabel" style="width: 158px; height: 20px; padding:2px;">请选择4S店名称：</label>
			<input id="test" type="radio" value="first" name="sname" onclick="chooseMenu()">本店</input>
			<input type="radio" value="second" name="sname" onclick="chooseMenu()">二级</input>
		</div>
		<div id="name2Box">
			<label id="typeLabel" style="width: 158px; height: 20px; padding:2px;">请输入2级店名称：</label>
			<input type="text" id="sfsname" class="l-text" style="width:120px;height:20px;"/>
			<input type="button" onclick="inputFSName()" value="确定" class="btn"/>
		</div>
	</div>
	
	<div id="upload-box">
		<div id="queue"></div>
		<p><input id="vinImageFile" name="vinImageFile" type="file" /></p>
		<p>
			<a href=""></a>
			<input type="button" class="btn1" value="批量上传" onclick="sendImage()"/> 
		</p>
	</div>
	
	<div id="gallery">
	    <iframe id="showimagebox" name="showimagebox" src="<s:url value='/common/lib/jquery-lightbox-0.5/index.jsp'/>"  style="width: 100%; height: 100%; border : 0;"></iframe>
	</div>

	<script type="text/javascript">
		var count = 0;
		$(function() {
			$("#showimagebox").hide();
			var dealerCode = $("#dealerCode").val();
			var timeStamp = $("#timeStamp").val();
			if(dealerCode != "" && timeStamp != "") {
				$("#dealer-code").hide();
				$("#upload-box").hide();
				$("#imgTypeBox").show();
				$("#nameBox").hide();
			} else {
				$("#imgTypeBox").hide();
				$("#upload-box").hide();
				$("#stroragePathLabel").hide();
				$("#stroragePath").hide();
				$("#dealerCodeText").focus();
				$("#nameBox").hide();
			}
		});
		
		function inputDealerCode() {
			$.post("<s:url value='/record/validDealerCode.action'/>",{dealerCode : $("#dealerCodeText").val()}, function(data) {
				if(data != 0) {
					$.ligerDialog.alert('您输入的经销商网代码有误，请重新输入!', '提示', 'error');
					$("#dealerCodeText").val("");
					$("#dealerCodeText").focus();
				} else {
					var dc = $("#dealerCodeText").val();
					$.post("<s:url value='/record/getStroragePaths.action'/>",{dealerCode : dc}, function(data) {
                		var datas = data.split(":");
                		if(datas[0] == 0) {
                			$("#dealerCodeText").attr("disabled", "disabled");
        					$("#dealerCodeInput").attr("disabled", "disabled");
        					$("#stroragePathLabel").show();
        					$("#stroragePath").show();
                			$("#stroragePath").prepend("<option value='0'>请选择...</option>");
                			var dirs = datas[1].split(",");
                			for(var i = 0; i < dirs.length; i++) {
                				var dir = dirs[i].replace(/\n/g, "").replace(/\r/g, "");
                				$("#stroragePath").append("<option value='" + dir + "'>" + dir + "</option>");
                			}
                			$("#stroragePath").change(function(){
            					var val = $("#stroragePath").val();
            					if(val != 0) {
            						$("#dealerCode").val(dc);
									$("#timeStamp").val(val);
									$("#imgTypeBox").show();
            					}
            				});
                		} else {
                			$.ligerDialog.alert('该经销商尚未上传数据!', '提示', 'none'); 
                		}
                	});
				}
			});
		}
		
		function chooseType() {
			var type = $("input[name='imgType']:checked").val();
			if(type) {
				$("#imgType").val(type);
				if(type != "omd") {
					$("#nameBox").show();
					$("#test").attr("checked","checked");
					$("#name2Box").hide();
					$("#upload-box").hide();
					$("#fsname").val("本店");
				} else {
					$("#nameBox").hide();
				}
				$("#upload-box").show();
				showUploadify();
			}
		}
		
		function chooseMenu() {
			var val = $("input[name='sname']:checked").val();
			if(val == "second") {
				$("#name2Box").show();
				$("#upload-box").hide();
			} else {
				$("#fsname").val("本店");
				$("#name2Box").hide();
				$("#upload-box").show();
				showUploadify();
			}
		}
		
		function inputFSName() {
			var val = $("#sfsname").val();
			if(val != null && val != "") {
				var pattern=/[\/\\\:\*\?\"\<\>\|]/;
	        	if(val.search(pattern) == -1) {
					$("#fsname").val(val);
					$("#upload-box").show();
					showUploadify();
				} else {
					$.ligerDialog.alert('S店名称有错，名称不能包含\\\/:*?"<>|"！', '错误', 'none');
				} 
			} else {
				$.ligerDialog.alert('请输入二级4S店名称', '错误', 'error');
			}
		}
		
		function sendImage() {
			var type = $("#imgType").val();
			var typeTip = "OMD系统截屏";
			if(type == "vin") {
				typeTip = "VIN码照片";
			}
			$.ligerDialog.confirm('您要上传的图片类型是：' + typeTip, function (yes) {
				if(yes) {
					$('#vinImageFile').uploadify('upload','*');
				}
			});
		}
		
		function showUploadify() {
			$('#vinImageFile').uploadify({
				'formData'     : {
					'uTimeStamp' : $("#uTimeStamp").val(),
					'uToken'     : $("#uToken").val(),
					'dealerCode' : $("#dealerCode").val(),
					'timeStamp'  : $("#timeStamp").val(),
					'imgType'	 : $("#imgType").val(),
					'fsName':$("#fsname").val()
				},
				'auto' : false,
				'fileSizeLimit':'100MB',
				'buttonText' : '请选择扫描照片',
				'fileTypeDesc' : '图片文件',
		        'fileTypeExts' : '*.gif; *.jpg; *.png',
				'swf'      : "<s:url value='/common/lib/uploadify/uploadify.swf'/>",
				'uploader' : "<s:url value='/uploadVINImage.action'/>",
				'fileObjName':'vinImageFile',
				'onUploadSuccess' : function(file, data, response) {
		            if(data == 0) {
		            	if(!$('#showimagebox').is(':visible')) {
		            		$("#showimagebox").show();
		            	}
		            	var doc = document.getElementById("showimagebox").contentDocument;
		            	if(!doc) {
		            		doc = document.getElementById("showimagebox").contentWindow;
		            	}
		            	var imageName = file.name.substr(file.name.indexOf(".") - 6);
						var urlImage = "<s:url value='/temp/'/>" + imageName;
						var aImage = doc.getElementById("image_" + count);
						var image = document.createElement('img');
						image.src = urlImage;
						image.width = 72;
						image.height = 72;
						aImage.appendChild(image);
						aImage.href = urlImage;
						aImage.title = file.name;
						count++;
					}
		        },
		        'onQueueComplete' : function(queueData) {
		            $.ligerDialog.alert('您一共上传了' + queueData.uploadsSuccessful + '张图片', '提示', 'success');
		            var val = $("input[name='sname']:checked").val();
					if(val == "second") {
						$("#name2Box").show();
						$("#upload-box").hide();
						$("#sfsname").val("");
					} 
		        },
		        'onFallback' : function() {
		            alert('没有安装Flash插件,请安装Flash插件，然后重启浏览器');
		        }
			});
		}
	</script>
</body>
</html>